這篇要在UI裡面接上viewmodel

在UI中添加viewmodel

先在App宣告，並將它分派給各個主要元件

fun App(modifier: Modifier = Modifier, globalVM: GlobalVM = viewModel())

Group

先從Group開始修改，將原本的todoItems改成viewmodel的變數，與onclick讓他在跳轉的時候選取到正確的Group

val todoList by globalVM.todoList.collectAsState()  
val groupList = todoList.groupBy {  
    it.group  
}.toList()

GroupItem(group) {  
    globalVM.focusGroup(group.first)  // 讓viewmodel的選取group更新
    navController.navigate(Screens.Main.Todos.route){  
        launchSingleTop = true  
    }  
}

TodoDisplay

讓他展示的內容來源變成viewmodel

val todoList by globalVM.todoList.collectAsState()  
val group by globalVM.currentGroup.collectAsState()

items(todoList.filter { it.group == group }) {  
    TodoItemBox(it)  
}

因為之後還需要有修改與刪除的功能，先在TodoItemBox加上觸發的函數

fun TodoItemBox(todoItem: TodoItem, onChecked: (Boolean)->Unit, onModified: ()->Unit, onDelete: ()->Unit)

這邊我示範onChecked的寫法，其他的會在後面章節
如果都妥善弄好，現在已經可以在Group進到TodoList，然後看到所選的內容

InputPage

我先在viewmodel中新增了一個取得現在focus物件的函數，在沒有focus的情況就是一個新的TodoItem

val todoList by globalVM.todoList.collectAsState()  
val groupNameList = todoList.map { it.group }.distinct()  
val currentTodo = globalVM.getFocusTodo()  
var title by remember { mutableStateOf(currentTodo.title) }  
var content by remember { mutableStateOf(currentTodo.content) }  
var group by remember { mutableStateOf(currentTodo.group) }

然後簡單改變submit button的onclick，讓submit起作用

Button(  
    onClick = {  
        globalVM.submitTodo(TodoItem(title, content, group))  
    }  
) {  
    Text("Submit")  
}

現在已經可以正常的新增todo了
雖然說現在這個軟體已經到了堪用的程度，但是還有很多明顯的不足
這些會在下一篇中改進